<template>
  <div class="settings-page">
    <div class="settings-container">
      <div class="settings-header">
        <div class="header-content">
          <button class="back-button" @click="goBack">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <h1 class="page-title">高级设置</h1>
        </div>
      </div>
      
      <div class="settings-content">
        <div class="settings-section">
          <h2 class="section-title">外观设置</h2>
          <div class="section-content">
            <ThemeSelector />
          </div>
        </div>
        
        
        <div class="settings-actions">
          <button class="btn btn-secondary" @click="resetSettings">重置设置</button>
          <button class="btn btn-primary" @click="goBack">完成</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ThemeSelector from '../../components/ThemeSelector/index.vue'
import themeService from '../../services/ThemeService.js'

const router = useRouter()

const ttsEnabled = ref(true)
const autoSave = ref(true)

// 返回上一页
const goBack = () => {
  router.push('/')
}

// 切换TTS
const toggleTTS = () => {
  ttsEnabled.value = !ttsEnabled.value
  // 这里可以添加保存到localStorage的逻辑
  localStorage.setItem('ttsEnabled', ttsEnabled.value.toString())
}

// 切换自动保存
const toggleAutoSave = () => {
  autoSave.value = !autoSave.value
  localStorage.setItem('autoSave', autoSave.value.toString())
}

// 重置设置
const resetSettings = () => {
  if (confirm('确定要重置所有设置吗？')) {
    // 重置主题
    themeService.resetTheme()
    
    // 重置其他设置
    ttsEnabled.value = true
    autoSave.value = true
    localStorage.setItem('ttsEnabled', 'true')
    localStorage.setItem('autoSave', 'true')
    
    // 重新加载页面以应用默认设置
    window.location.reload()
  }
}

// 初始化
onMounted(() => {
  const savedTtsEnabled = localStorage.getItem('ttsEnabled')
  const savedAutoSave = localStorage.getItem('autoSave')
  
  if (savedTtsEnabled !== null) {
    ttsEnabled.value = savedTtsEnabled === 'true'
  }
  
  if (savedAutoSave !== null) {
    autoSave.value = savedAutoSave === 'true'
  }
})
</script>

<style scoped>
@import './index.css';
</style>
